<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>

        *{
            margin: 0 auto;
            padding:  0;
        }
        
        #body{
            background-color: pink;
            height: 1000px;
             
        }

        .body{
            text-align: center;
            background-color: white;
            width: 20%;
            height: 45%;
            /* font-size: 0; */
/*            padding: 10px;*/
            display: inline-block;
            margin: 20px;
        }

        img{
            width: 100%;
            padding: 0;
        }
        
       
        
        a{
            color: white;
            text-decoration: none;

        }

        .a{
            background-color: red;
            margin: 20px 80px;
            
        }

    </style>

</head>
<body>
    <div id="body">
        <div class="body">

        <img src="../02.jpg" alt="">

        <h2>Xiaomi MIX2</h2>

        <p>超薄折叠机身设计，小米自研微水滴形态转轴</p >

        <h2>￥8999</h2>
        
        <div class="a">

            <a href="">立即购买</a >

        </div>
        
        
        </div>
        

        <div class="body">

        <img src="../02.jpg" alt="">

        <h2>Xiaomi MIX2</h2>

        <p>超薄折叠机身设计，小米自研微水滴形态转轴</p >

        <h2>￥8999</h2>
        
        <div class="a">

            <a href="">立即购买</a >

        </div>
        
        
        </div>

        <div class="body">

        <img src="../02.jpg" alt="">

        <h2>Xiaomi MIX2</h2>

        <p>超薄折叠机身设计，小米自研微水滴形态转轴</p >

        <h2>￥8999</h2>
        
        <div class="a">

            <a href="https://hd.mi.com">立即购买</a >

        </div>
        
        
        </div>

        <div class="body">

        <img src="../02.jpg" alt="">

        <h2>Xiaomi MIX2</h2>

        <p>超薄折叠机身设计，小米自研微水滴形态转轴</p >

        <h2>￥8999</h2>
        
        <div class="a">

            <a href="">立即购买</a >

        </div>
        
        
        </div>

        <div class="body">

        <img src="../02.jpg" alt="">

        <h2>Xiaomi MIX2</h2>

        <p>超薄折叠机身设计，小米自研微水滴形态转轴</p >

        <h2>￥8999</h2>
        
        <div class="a">

            <a href="">立即购买</a >

        </div>
        
        
        </div>

        <div class="body">

        <img src="../02.jpg" alt="">

        <h2>Xiaomi MIX2</h2>

        <p>超薄折叠机身设计，小米自研微水滴形态转轴</p >

        <h2>￥8999</h2>
        
        <div class="a">

            <a href="">立即购买</a >

        </div>
        
    </div>

    </div>

</body>
</html>